<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        .layui-btn-container {
            margin-bottom: 15px;
        }
        .admin-status {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-online {
            background-color: #f0f9eb;
            color: #67c23a;
        }
        .status-offline {
            background-color: #fdf6ec;
            color: #e6a23c;
        }
        #detailDialog {
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">管理员管理</div>
        <div class="layui-card-body">
            <!-- 工具栏 -->
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal" id="addAdminBtn">
                    <i class="layui-icon layui-icon-add-circle"></i> 添加管理员
                </button>
            </div>
            
            <!-- 表格 -->
            <table id="adminTable" lay-filter="adminFilter"></table>
        </div>
    </div>
</div>

<!-- 管理员详情对话框 -->
<div id="detailDialog" style="display: none; padding: 20px;">
    <table class="layui-table" lay-skin="nob">
        <tr>
            <td>用户名</td>
            <td><span id="detailUsername"></span></td>
        </tr>
        <tr>
            <td>创建时间</td>
            <td><span id="detailCreateTime"></span></td>
        </tr>
        <tr>
            <td>状态</td>
            <td><span id="detailStatus"></span></td>
        </tr>
    </table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'jquery', 'util'], function () {
        // 加载获取table模块
        var table = layui.table;
        // 加载获取layer弹层模块
        var layer = layui.layer;
        // 加载jquery对象
        var $ = layui.jquery;
        var util = layui.util;

        // 渲染管理员表格
        var adminTable = table.render({
            elem: '#adminTable',
            url: '/admin/list', // 数据接口
            page: true, // 开启分页
            limit: 10, // 每页默认10条
            limits: [5, 10, 20, 50], // 可选的每页条数
            cols: [[
                {field: 'id', title: 'ID', width: 80},
                {field: 'username', title: '用户名', width: 150},
                {field: 'createTime', title: '创建时间', width: 200, templet: function(d) {
                    return util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                }},
                {field: 'status', title: '状态', width: 100, templet: function(d) {
                    return d.status === 1 ? '<span class="admin-status status-online">正常</span>' : '<span class="admin-status status-offline">禁用</span>';
                }},
                {fixed: 'right', title: '操作', toolbar: '#rowTools', width: 250}
            ]],
            parseData: function(res) {
                // 统一处理后端返回的数据格式
                return {
                    "code": res.code === 200 ? 0 : res.code,
                    "msg": res.message,
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        // 添加管理员按钮点击事件
        $('#addAdminBtn').on('click', function() {
            // 跳转到添加页面
            window.parent.document.getElementById('iframe').src = 'html/admin-add.html';
        });

        // 监听工具条事件
        table.on('tool(adminFilter)', function(obj) {
            var data = obj.data; // 获得当前行数据
            var layEvent = obj.event; // 获得 lay-event 对应的值

            if (layEvent === 'details') {
                // 查看详情
                $.get('/admin/details?id=' + data.id, function(resp) {
                    if (resp.code === 200) {
                        var admin = resp.data;
                        $('#detailUsername').text(admin.username || '');
                        $('#detailCreateTime').text(util.toDateString(admin.createTime, 'yyyy-MM-dd HH:mm:ss') || '');
                        $('#detailStatus').text(admin.status === 1 ? '正常' : '禁用');

                        layer.open({
                            type: 1,
                            title: '管理员详情',
                            area: ['400px', 'auto'],
                            content: $('#detailDialog'),
                            btn: ['关闭'],
                            btnAlign: 'c'
                        });
                    } else {
                        layer.msg(resp.message || '获取详情失败', {icon: 5});
                    }
                });
            } else if (layEvent === 'edit') {
                // 编辑管理员
                window.parent.document.getElementById('iframe').src = 'html/admin-add.html?id=' + data.id;
            } else if (layEvent === 'del') {
                // 删除管理员
                layer.confirm('确定要删除该管理员吗？', {
                    btn: ['确定', '取消'],
                    icon: 3
                }, function() {
                    $.ajax({
                        url: '/admin/delete',
                        type: 'DELETE',
                        data: {id: data.id},
                        success: function(resp) {
                            if (resp.code === 200) {
                                layer.msg('删除成功', {icon: 6});
                                adminTable.reload(); // 重新加载表格
                            } else {
                                layer.msg(resp.message || '删除失败', {icon: 5});
                            }
                        },
                        error: function() {
                            layer.msg('网络错误，请稍后重试', {icon: 5});
                        }
                    });
                });
            } else if (layEvent === 'enable') {
                // 启用管理员
                layer.confirm('确定要启用该管理员吗？', {
                    btn: ['确定', '取消'],
                    icon: 3
                }, function() {
                    $.post('/admin/enable?id=' + data.id, function(resp) {
                        if (resp.code === 200) {
                            layer.msg('启用成功', {icon: 6});
                            adminTable.reload(); // 重新加载表格
                        } else {
                            layer.msg(resp.message || '启用失败', {icon: 5});
                        }
                    });
                });
            } else if (layEvent === 'disable') {
                // 禁用管理员
                layer.confirm('确定要禁用该管理员吗？', {
                    btn: ['确定', '取消'],
                    icon: 3
                }, function() {
                    $.post('/admin/disable?id=' + data.id, function(resp) {
                        if (resp.code === 200) {
                            layer.msg('禁用成功', {icon: 6});
                            adminTable.reload(); // 重新加载表格
                        } else {
                            layer.msg(resp.message || '禁用失败', {icon: 5});
                        }
                    });
                });
            }
        });
    });
</script>

<!-- 操作栏自定义模板 -->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i> 详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i> 编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </button>
        {{# if(d.status === 1){ }}
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="disable">
            <i class="layui-icon layui-icon-close-fill"></i> 禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-success layui-btn-xs" lay-event="enable">
            <i class="layui-icon layui-icon-ok-circle"></i> 启用
        </button>
        {{# } }}
    </div>
</script>
</body>
</html>